<template>
  <div class="h100 home">
      <header>
        我是标题
      </header>
      <main>
        <!-- 展示二级路由 -->
        <router-view></router-view>
      </main>
      <footer>
        <ul>
          <router-link v-for="(item, index) in list"
                       active-class="active"
                       :to="item.path" tag="li" :key="index">
            {{ item.title }}
          </router-link>
        </ul>
      </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          // 二级路由
          path: "/home/homes",
          title: "首页"
        },
        {
          path: "/home/recommend",
          title: "推荐"
        },
        {
          path: "/home/apps",
          title: "应用"
        },
        {
          path: "/home/my",
          title: "我的"
        }
      ]
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
}

.home header {
  height: 46px;
  text-align: center;
  line-height: 46px;
}

.home main {
  flex: 1
}

.home footer {
  height: 46px;
  text-align: center;
  line-height: 46px;
  
}

.home footer ul {
  display: flex
}

.home footer ul li {
  flex: 1;
}
</style>